<template>
  <view :style="themeStore.themeStyle" class="content">
    {{ themeStore.themeStyle }}
    <up-button type="primary" @click="gotoSettingPassword()" :text="$t('button.change_password')" class="m-b-10"></up-button>
    <up-button type="primary" @click="onOpenSelect('changeLang')" :text="$t('button.switchLanguage')" class="m-b-10"></up-button>
    <up-button type="primary" @click="onOpenSelect('toggleTheme')" :text="$t('button.switchTheme')"></up-button>
    <up-picker :show="show" :columns="columns" keyName="label" :title="title" @confirm="confirmLang" @cancel="cancel"></up-picker>
  </view>
</template>

<script lang="ts" setup>
import { useMemberStore } from '@/store/modules/member'
import { useThemeStore } from '@/store/modules/theme'
import { useI18n } from 'vue-i18n'
import { route } from 'uview-plus'
defineProps({ name: String })
const show = ref(false)
const { locale, t } = useI18n()
const themeStore = useThemeStore()
let columns = ref()
let title = ref()
const langList = computed(() => {
  return [
    [
      {
        label: t('selectLabel.zh'),
        value: 'zh'
      },
      {
        label: t('selectLabel.en'),
        value: 'en'
      }
    ]
  ]
})
const themeList = computed(() => {
  return [
    [
      {
        label: t('selectLabel.default_theme'),
        value: 'default'
      },
      {
        label: t('selectLabel.red_theme'),
        value: 'red'
      }
    ]
  ]
})
let selectedType = ref('')
interface Item {
  label: string
  value: string
}
const userInfoObj = useMemberStore()
const setUserInfoFun = () => {
  userInfoObj.setUserInfo({
    userName: '测试修改名-持久化',
    userId: '342432432'
  })
}
// 打开底部弹窗
const onOpenSelect = (type: String) => {
  switch (type) {
    case 'changeLang':
      columns.value = langList.value
      selectedType.value = 'changeLang'
      title.value = t('button.switchLanguage')
      show.value = true
      break
    case 'toggleTheme':
      columns.value = themeList.value
      selectedType.value = 'toggleTheme'
      title.value = t('button.switchTheme')
      show.value = true
      break
  }
}
// 确认底部弹窗
const confirmLang = (itemArrry: { value: Item[] }) => {
  switch (selectedType.value) {
    // 语言
    case 'changeLang':
      locale.value = itemArrry.value[0].value
      uni.setStorageSync('lang', itemArrry.value[0].value)
      break
    // 主题
    case 'toggleTheme':
      type ThemeMode = 'default' | 'red'
      // themeStore.toggleTheme(itemArrry.value[0].value as ThemeMode)
      // const newTheme = themeStore.currentTheme === 'default' ? 'red' : 'default'
      themeStore.setTheme(itemArrry.value[0].value as ThemeMode)
      break
  }
  cancel()
}
const cancel = () => {
  show.value = false
}
const gotoSettingPassword = () => {
  route({
    url: '/pages_user/settings/setting_password/setting_password',
    params: {
      name: '测试值'
    }
  })
}


onShow(() => {
  themeStore.initTheme()
})
</script>

<style lang="scss" scoped>
.container {
  background-color: var(--background-color);
}
</style>
